<template>
	<view>
		<!-- <page-head :title="title"></page-head> -->
		<view class="uni-common-mt">
			<view class="uni-list" style="padding:10rpx">
				<view class="uni-list-cell" style='padding-bottom:5rpx;'>
					<view class="uni-list-cell-left">
						<view class="uni-label">姓名<font style='color:red'>＊</font></view>
					</view>
					<view class="uni-list-cell-db" style='width:14rem'>
						<input class="uni-input" type="text" placeholder-style="color:#F76260" placeholder="请输入姓名" name="name" :value="pageModel.name" @input="nameChange"></input>
					</view>
				</view>
				<view class="uni-list-cell" style='padding-bottom:5rpx;'>
					<view class="uni-list-cell-left">
						<view class="uni-label">联系方式<font style='color:red'>＊</font></view>
					</view>
					<view class="uni-list-cell-db" style='width:14rem'>
						<input class="uni-input" placeholder-style="color:#F76260" type="text" placeholder="请输入联系方式" name="telephone" :value="pageModel.telephone" @input="telephoneChange" ></input>
					</view>
				</view>
				<view class="uni-list-cell" style='padding-bottom:5rpx;'>
					<view class="uni-list-cell-left">
						<view class="uni-label">性别</view>
					</view>
					<view class="uni-list-cell-db" style='width:14rem'>
						<radio-group @change="radioChange">
						<label class="radio" style="padding-left: 1rem;"><radio value="0"/>男</label>
						<label class="radio" style="padding-left: 1rem;"><radio value="1"/>女</label>
						</radio-group>
					</view>
				</view>
				<view class="uni-list-cell" style='padding-bottom:5rpx;'>
					<view class="uni-list-cell-left">
						<view class="uni-label">身份证号</view>
					</view>
					<view class="uni-list-cell-db" style='width:14rem'>
						<input class="uni-input" type="text" placeholder="请输入身份证号" name="idcard" :value="pageModel.idcard" @input="idcardChange"></input>
					</view>
				</view>
				<view class="uni-list-cell" style='padding-bottom:5rpx;'>
					<view class="uni-list-cell-left">
						<view class="uni-label">学历</view>
					</view>
					<view class="uni-list-cell-db" style='width:14rem'>
						<input class="uni-input" type="text" placeholder="请输入学历信息" name="eduction" :value="pageModel.eduction" @input="eductionChange"></input>
					</view>
				</view>
				<view class="uni-list-cell" style='padding-bottom:5rpx;'>
					<view class="uni-list-cell-left">
						<view class="uni-label">备注</view>
					</view>
					<view class="uni-list-cell-db"  style='width:14rem;height: 3rem;'>
						<textarea placeholder="备注" style="height: 3rem;"name="description" :value="pageModel.description" @input="descriptionChange"/>
					</view>
				</view>
			</view>
			<view class="uni-padding-wrap">
				<view class="uni-btn-v" style='padding:1rem'>
					<button v-if='!isClick' style="background-color: #3796e1" type="primary" class="btn-setstorage" @tap="saveRecord">立即报名</button>
					<button v-if='isClick' style="background-color: #3796e1" type="primary" class="btn-setstorage">正在报名.....</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			    registerUrl :'https://www.1xx.online/japx/enroll',
				title: '线上报名',
				isClick:false,
				sexArr: [{value: 'male',name: '男'},{value: 'female',name: '女'}],
				current: 0,
				pageModel:{
					context_id:'',
					name:'',
					telephone:'',
					sex:'male',
					idcard:'',
					eduction:'',
					description:'',
				}
			}
		},
		onLoad(options) {
			console.log(options)
			this.pageModel.context_id = options.context_id
			uni.setNavigationBarTitle({
				title:options.title,
			})
		},
		methods: {
			radioChange:function(evt){
				debugger
				if(evt.target.value=="0")	{
					this.current = 1;
					this.pageModel.sex = 'male'
				}else{
					this.current = 0;
					this.pageModel.sex = 'female'
				}
			},
			nameChange: function (e) {
				this.pageModel.name = e.detail.value
			},
			telephoneChange: function (e) {
				this.pageModel.telephone = e.detail.value
			},
			idcardChange: function (e) {
				this.pageModel.idcard = e.detail.value
			},
			eductionChange: function (e) {
				this.pageModel.eduction = e.detail.value
			},
			descriptionChange: function (e) {
				this.pageModel.description = e.detail.value
			},
			saveRecord: function () {
				var that = this; 
				that.isClick = true;
				var para = JSON.stringify({ params: that.pageModel });
				uni.request({
					url: that.registerUrl ,
					header: {
						'Content-Type': 'application/json'
					},
					method: 'POST',
					dataType: 'json',
					data: para,
					complete: res => {
						if (res.statusCode == 200) {
							var result = res.data.result;
							if (!!result) {
								that.isClick = false;
								uni.showModal({
								    title: '提示',
								    content: '报名成功！',
								    success: function (res) {
								        uni.navigateTo({
								        	url: '/pages/context/detail?headid='+that.pageModel.context_id+'&name=已报名'
								        });
								    }
								});
							}
						}
					}
				})
				
			},
			clearStorage: function () {
				uni.clearStorageSync()
				this.key = '',
					this.data = ''
				uni.showModal({
					title: '清除数据成功',
					content: ' ',
					showCancel:false
				})
			}
		}
	}
</script>

<style>
	.uni-list-cell {
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: row;
	    flex-direction: row;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	}.uni-list-cell-left {
    white-space: nowrap;
    font-size: 15px;
    padding: 0 16px;
}
	.uni-list-cell-left {
	    white-space: nowrap;
	    font-size: 15px;
	    padding: 0 16px;
	}.uni-input {
    height: 27px;
    padding: 8px 13px;
    line-height: 27px;
    font-size: 15px;
    background: #FFF;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

uni-input {
    display: block;
    font-size: 16px;
    line-height: 1.4em;
    height: 1.4em;
    min-height: 1.4em;
    overflow: hidden;
}
	uni-view {
	    font-size: 15px;
	    line-height: 1.8;
	}
	uni-view {
	    display: block;
	}
	* {
	    margin: 0;
	    -webkit-tap-highlight-color: transparent;
	}
	
	.btn-setstorage {
		background-color: #007aff;
		color: #ffffff;
	}
</style>
